<template>
  <div class="router-container">
    <el-row class="container">
      <router-link v-for="(item, index) of routers" :key="index" :to="item.url" tag="div" class="router-item">{{ item.name }}</router-link>
    </el-row>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    routers: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.router-container{
  width: 100%;
  margin-bottom: 10px;
  .container{
    display: flex;
    width: 100%;
    .router-item{
      flex: 1;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid #e6e6e6;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      height: 50px;
    }
    .router-link-active{
      border-color: #409eff;
      color: #409eff;
    }
  }
}
</style>
